<!-- src/components/TodoInput.vue -->
<template>
    <div class="input-container">
      <input 
        type="text" 
        class="todo-input" 
        placeholder="添加新的任务，按回车键确认" 
        v-model="todoText" 
        @keyup.enter="handleAddTodo"
      >
    </div>
  </template>
  
  <script>
  import { ref } from 'vue';
  
  export default {
    name: 'TodoInput',
    emits: ['add-todo'],
    setup(props, { emit }) {
      const todoText = ref('');
  
      const handleAddTodo = () => {
        const text = todoText.value.trim();
        if (text) {
          emit('add-todo', text);
          todoText.value = '';
        }
      };
  
      return {
        todoText,
        handleAddTodo
      };
    }
  }
  </script>